<template>
  <div>
    <el-form ref="gridSetting"
             :model="setting"
             label-position="top"
             style="height:auto;">
       <el-form-item label="Request URL">
        <el-input v-model="setting.apiURL"></el-input>
       </el-form-item>
      <el-form-item label="method">
        <el-select v-model="setting.method" >
           <el-option v-for="(item,index) in methodOption" :key="index" :label="item" :value="item"></el-option>
        </el-select>
       </el-form-item>

      <el-form-item label="Settings">
        <v-jsoneditor v-model="setting"
                      :options="jsoneditorSetting.options"
                      :plus="jsoneditorSetting.plus"
                      :height="jsoneditorSetting.height"
                      :indentation="jsoneditorSetting.indentation"
                      :search="jsoneditorSetting.search"
                      :path="jsoneditorSetting.path"
                      :color="jsoneditorSetting.color"
                      @error="onError"></v-jsoneditor>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import Index from '../../dashboard-filter/index.vue'
export default {
  name: 'APIGridSetting',
  components: { Index },
  data () {
    return {
      jsoneditorSetting: {
        options: { mode: 'code' },
        plus: false,
        height: '400px',
        indentation: 2,
        search: false,
        color: 'red',
        path: false
      },
      setting: {
        report: {
          gridLines: 'Both',
          showColumnMenu: true,
          allowResizing: true,
          allowFiltering: true,
          filterSettings: { type: 'Excel' },
          allowGrouping: false,
          allowPaging: true,
          allowExcelExport: true,
          allowPdfExport: true,
          toolbar: ['Search', 'ColumnChooser'], // 'ExcelExport'
          showColumnChooser: true,
          groupOptions: { columns: ['name'] },
          allowReordering: true,
          allowSorting: true,
          allowTextWrap: true,
          height: window.innerHeight - 500,
          pageSettings: { pageSize: 50, pageSizes: [50, 100, 200, 1000], pageCount: 4 },
          groupSettings: {
            allowReordering: false,
            columns: [],
            disablePageWiseAggregates: false,
            enableLazyLoading: false,
            showDropArea: false,
            showGroupedColumn: false,
            showToggleButton: false

          }

        },
        apiURL: '',
        method: '',
        requestData: {}
      },
      methodOption: [ 'GET', 'POST' ]
    }
  },
  props: {
    dataInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  watch: {

  },
  computed: {},
  created () {
    if (this.data) {
      this.$set(this.data)
    }
  },
  methods: {
    getData () {
      return this.setting
    },
    onError (value) {

    },
    updateSetting (value, list, layerStatus) {
      this._.merge(this.setting, value.gadgetSetting)
      this.$emit('update:data', this.setting)
    }
  }
}
</script>

<style lang="scss">
</style>
